<template>
	<view>
		<view class="list-box">
			<view class="list" v-for="(item,index) in list">
				<view class="item-list" @click="goToInfo(item)">
					<view class="fbox fbox-jbetween">
						<image class="tou" :src="item.logo" mode=""></image>
						<view class="info">
							<view class="name-eye fbox fbox-acenter fbox-jbetween">
								<view class="name ellipsis f32 color3">{{item.name}}</view>
								<view class="eye f24 fbox fbox-acenter">
									<image src="/static/mu.png" mode="widthFix"></image>234
								</view>
							</view>
							<view class="jing f24" v-if="item.category">
								# {{item.category}}
							</view>
						</view>
					</view>
					<view class="er f28 color3 ellipsis3">
						ActivityScope: {{item.management}}
					</view>
					<view class="sa fbox fbox-acenter fbox-jbetween">
						<view class="sa-item fbox fbox-acenter fbox-jcend">
							<image src="/static/address.png" mode="widthFix"></image>
							<text>{{item.address}}</text>
						</view>
						<view class="sa-item fbox fbox-acenter fbox-jcend" @click.stop="clickdelete(item)" v-if="type == 'list'">				
							<u-icon name="trash" color="#b8b8b8" size="20"></u-icon>
						</view>
						<view class="sa-item fbox fbox-acenter fbox-jcend" v-else>
							<image src="/static/distance.png" mode="widthFix"></image>
							<text>{{item.distance}}</text>
						</view>
					</view>
				</view>
			</view>
			<u-modal :show="show" :confirmText="confirmText" :cancelText="cancelText" :title="title" @confirm="confirm" @cancel="cancel" :showCancelButton="true" :content='content'></u-modal>
			<view v-show="list.length > 0" style="padding-bottom: 20rpx;">
				<u-loadmore :status="status" :nomore-text="nomoreText" fontSize="12" color="#999" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			type: {
				type: String,
				default:''
			},
		},
		data() {
			return {
				status: 'nomore',
				nomoreText: 'The End',
				show:false,
				title:this.$t('user.prompt'),
				content:this.$t('user.delete'),
				cancelText:this.$t('user.cancel'),
				confirmText:this.$t('user.yes'),
				id:""
			};
		},
		methods:{
			goToInfo(item){
				uni.navigateTo({
					url:"/pages/telBook/details/index?id="+item.id
				})
			},
			clickdelete(item){
				console.log(item)
				this.show = true
				this.id = item.id
			},
			cancel(){
				this.show = false
			},
			confirm(){
				uni.showLoading({
					mask:true
				})
				let params = {
					map: 'applet_mobile_set_record',
					sid: this.id,
					type:'browse',
					delete:1
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						uni.hideLoading()
						uni.showToast({
							title:this.$t('user.success'),
							icon:'none'
						})
						this.$emit("init",this.index)
						this.show = false
					} else {
						uni.hideLoading()
						this.show = false
						uni.showToast({
							title:this.$t('user.fail'),
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.list-box {
		background-color: rgb(242, 242, 242);
		padding: 20rpx;

		.list {
			border-radius: 20rpx;
			background-color: #fff;
			margin-top: 20rpx;

			.item-list {
				padding: 30rpx;
				border-radius: 20rpx;


				.tou {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 20rpx;

				}

				.info {
					width: 80%;

					.name-eye {
						.name {
							width: 350rpx;
						}

						.eye {
							color: #6f6f6f;

							image {
								width: 36rpx;
								margin-right: 10rpx;
							}
						}
					}

					.jing {
						color: #2497ff;
						padding: 4rpx 16rpx;
						font-size: 24rpx;
						display: inline-block;
						margin-top: 10rpx;
						background-color: #f7f7f7;
						border-radius: 10rpx;
					}
				}


				.er {
					width: 100%;
					margin-top: 20rpx;
				}

				.sa {
					margin-top: 20rpx;

					.sa-item {
						image {
							width: 26rpx;
							margin-right: 10rpx;
						}

						text {
							font-size: 24rpx;
							color: #6f6f6f;
						}
					}

				}
			}
		}
	}
</style>
